<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>FileReader与URL.createObjectURL实现图片、视频上传预览</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .section {
            margin: 20px auto;
            width: 500px;
            border: 1px solid #666;
            text-align: center;
        }

        .preview {
            width: 100%;
            margin-top: 10px;
            padding: 10px;
            min-height: 100px;
            background-color: #999;
        }

        .preview img,
        .preview video {
            width: 100%;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
</head>
<!--文章https://juejin.im/post/59f892286fb9a04511706f53  -->
<!--文章https://segmentfault.com/q/1010000004625752  -->
<body>
    <h1>方案一对于长视频上传预览直接奔溃，短视频方案一可以但是性能差，方案二不会</h1>
    <div class="section">
        <p>方案1</p>
        <input class="upload" type="file" onchange="onUpload1(this.files[0])">
        <div class="preview preview1"></div>
    </div>

    <div class="section">
        <p>方案2</p>
        <input class="upload" type="file" onchange="onUpload2(this.files[0])">
        <div class="preview preview2"></div>
    </div>
    <div id="output"></div>
    <script>
        function onUpload1(file) {
            var fr = new FileReader();
            fr.readAsDataURL(file); // 将文件读取为Data URL

            fr.onload = function (e) {
                var result = e.target.result;
                if (/image/g.test(file.type)) {
                    var img = $('<img src="' + result + '">');
                    $('.preview1').html('').append(img);
                } else if (/video/g.test(file.type)) {
                    var vidoe = $('<video controls src="' + result + '">');
                    $('.preview1').html('').append(vidoe);
                }
            }
        }

        function onUpload2(file) {
            var blob = new Blob([file]), // 文件转化成二进制文件
                url = URL.createObjectURL(blob); //转化成url
            if (/image/g.test(file.type)) {
                var img = $('<img src="' + url + '">');
                img[0].onload = function (e) {
                    URL.revokeObjectURL(this.src); // 释放createObjectURL创建的对象
                }
                $('.preview2').html('').append(img);
            } else if (/video/g.test(file.type)) {
                var video = $('<video controls id="vi" src="' + url + '">');
                $('.preview2').html('').append(video);
                video[0].onload = function (e) {
            
                    URL.revokeObjectURL(this.src); // 释放createObjectURL创建的对象
                }
                var vi = document.getElementById('vi')
                var scale = 0.5;//第一帧图片与源视频的比例
                //获取视频的第一帧并且作为图片展示
                vi.addEventListener('loadeddata', function () {
                        var canvas = document.createElement("canvas");
                        canvas.width = $('.preview2').width() //this.videoWidth*scale;设置canvas的宽度
                        canvas.height =  $('.preview2').height() //this.videoHeight*scale;设置canvas的高度
                        canvas.getContext('2d').drawImage(this, 0, 0, canvas.width, canvas.height);

                        var img = document.createElement("img");
                        img.src = canvas.toDataURL("image/png");
                        output.appendChild(img);




                    });
            }
        }
    </script>
</body>

</html>